<template>
  <div>
    <!--    模板插值-->
    <p>{{ msg }}</p>
  </div>
  <HelloWorld msg="欢迎来到第五次元！"/>
  <List/>
  <Event/>
  <Element/>
  <slotview>
    <template #first="slotProps">
      <p style="color: aquamarine">{{ slotProps.msg }}</p>
      <div>这就是插槽显示</div>
      <p>在父组件这里插在了子组件的slot标签里</p>
    </template>
    <template #second>
      <div>这就是第二个插槽显示</div>
      <p>在父组件这里插在了子组件的slot标签里</p>
      <img src="../imgs/组件生命周期.png">
    </template>
  </slotview>
</template>
<script setup>
import {ref} from 'vue';
import HelloWorld from "@/components/HelloWorld.vue";
import List from "@/components/List.vue";
import Event from "@/components/Event.vue";
import Element from "@/components/element.vue";
import Slotview from "@/components/slotview.vue"

const msg = ref("欢迎来到米奇妙妙屋！")
</script>

<style>
</style>
